import { watch } from 'vue'
import type { FormItemDto } from '../types'
import AddTag from './AddTag'
import RadioForm from './RadioForm'
import ImgSelect from '@/components/img-select/Index'
import FormTable from './FormTable'
import TextComponent from './Text'
import InputList from './InputList'
import CustomInsurancePlanName from './CustomInsurancePlanName'
import CustomInsurancePriceTable from './CustomInsurancePriceTable'

const handleChange = (data: FormItemDto) => {
    data.callback?.click && data.callback.click()
}

export function tag(data: FormItemDto) {
    return <AddTag
        item-data={data}
        v-model={data.value}
        onClick={() => handleChange(data)}
    />
}

export function radioForm(data: FormItemDto) {
    return <RadioForm
        item-data={data}
        v-model={data.value}
    />
}

export function imgSelect(data: FormItemDto) {
    return <ImgSelect
        options={data.options || []}
        v-model={data.value as string}
    />
}

export function formTable(data: FormItemDto) {
    return <FormTable
        v-model={data.value}
        form-data={data}
    />
}

export function text(data: FormItemDto) {
    return <TextComponent
        v-model={data.value}
        form-data={data}
    />
}

export function inputs(data: FormItemDto) {
    return <div>
        <InputList
            v-model={data.value}
            formData={data}
            onChange={ data.callback?.change }
        />
        <div>{data?.params?.tips ?? undefined}</div>
    </div>
}

export function customInsurancePlanName(data: FormItemDto) {
    return <CustomInsurancePlanName
        v-model={data.value}
        formData={data}
    />
}

// 
export function customInsurancePriceTable(data: FormItemDto) {
    return <CustomInsurancePriceTable
        v-model={data.value}
        formData={data}
    />
}
export default {
    tag,
    radioForm,
    imgSelect,
    formTable,
    text,
    inputs,
    customInsurancePlanName,
    customInsurancePriceTable
}
